<template>
  <div class="">
    <!-- 弹窗 -->
    <el-dialog v-model="store.menuInsertOpen" :show-close="false" append-to-body class="dialogClass" width="36%" draggable overflow >
      <!--弹窗标题-->
      <template #header="{ close, titleId }">
        <div class="dialogHeader">
          <span :id="titleId" class="dlgTitleClass" style="margin: 10px 10px;" v-if="store.updateMenuId===0">新增</span>
          <span :id="titleId" class="dlgTitleClass" style="margin: 10px 10px; " v-if="store.updateMenuId!==0">修改</span>
          <el-icon style="font-size: 18px;margin-top: 14px;cursor: pointer" @click="closeDialog">
            <CloseBold/>
          </el-icon>
        </div>
      </template>
      <!--弹窗内容-->
      <template #default>
        <el-form class="menu-form" ref="addMenuFormRef" :rules="rules" :model="addMenuData">
          <el-form-item label="菜单类别" prop="menuType" >
            <el-radio-group v-model="addMenuData.menuType">
              <el-radio border label="M">目录</el-radio>
              <el-radio border label="F">菜单</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上级菜单" class="parent-select" prop="parentId">
            <el-tree-select
                v-model="addMenuData.parentId"
                :data="parentMenuList"
                check-strictly
                :render-after-expand="false"
            />
          </el-form-item>
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="addMenuData.menuName" placeholder="请输入菜单名称"></el-input>
          </el-form-item>
          <el-form-item label="菜单标识" prop="menuCode">
            <el-input v-model="addMenuData.menuCode" placeholder="请输入菜单唯一标识" :disabled="store.updateMenuId!==0"></el-input>
          </el-form-item>
          <el-form-item label="菜单路径" prop="path" >
            <el-input v-model="addMenuData.path" placeholder="请输入菜单路径"></el-input>
          </el-form-item>
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="addMenuData.component" placeholder="请输入组件路径"></el-input>
          </el-form-item>
          <el-form-item label="菜单图标" prop="icon" label-width="78px" >
            <icon-select v-model:model-value="addMenuData.icon"/>
          </el-form-item>
          <el-form-item label="菜单排序" prop="orderNum" label-width="78px">
            <el-input-number
                v-model="addMenuData.orderNum"
                :min="1"
                :max="999"
                controls-position="right"
            />
          </el-form-item>
          <el-form-item label="启用" label-width="78px" prop="visible">
            <el-radio-group v-model="addMenuData.visible">
              <el-radio border :label="0">是</el-radio>
              <el-radio border :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <!--弹窗底部-->
      <template #footer>
        <span class="myDialogFooter">
          <el-button class="el-button__default" @click="closeDialog">取 消</el-button>
          <el-button type="primary" class="el-button__primary" @click="addMenuInfo()" v-if="store.updateMenuId===0">确认添加</el-button>
          <el-button type="primary" class="el-button__primary" @click="updateMenuInfo()" v-if="store.updateMenuId!==0">确认修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import IconSelect from "@/components/SvgSelect.vue";
import {defineEmits, onMounted, reactive, ref, watch} from "vue";
import {addMenuInfos, getMenuInfoById, getParentMenuList, removeMenu, updateMenuInfos} from "@/api/menu/index.js";
import {CloseBold} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import addMenu from "@/components/menu/addMenu.vue";
import {menuStore} from "@/stores/menu/menuStore.js";
const addMenuFormRef = ref()
const visible = ref(true);
const emit = defineEmits(['refresh'])
const addMenuData= ref({
  id:0,
  menuName:"",
  menuCode:"",
  parentId:0,
  orderNum:"",
  path:"",
  component:"",
  menuType:'M',
  status:0,
  icon:""
})
const store=menuStore()
onMounted(()=>{
  initParentMenuList()
})
const parentMenuList = ref([{}])
const rules=reactive({
  menuName:[
    {required:true,message:"菜单名称不能为空",trigger:"blur"}
  ],
  parentId:[
    {required:true,message:"父级菜单不能为空",trigger:"blur"}
  ],
  path:[
    {required:true,message:"路由地址不能为空",trigger:"blur"}
  ],
  component:[
    {required:true,message:"组件路径不能为空",trigger:"blur"}
  ],
  menuType:[
    {required:true,message:"菜单类型不能为空",trigger:"blur"}
  ],
  menuCode:[
    {required:true,message:"菜单唯一标识不能为空",trigger:"blur"}
  ]
})

const initParentMenuList = async () => {
const res = await getParentMenuList()
  parentMenuList.value = res.data
  console.log(parentMenuList.value)
}

//观察menuId变化

watch(store,()=>{
  addMenuData.value.parentId=store.menuId
  initParentMenuList()
  if (store.updateMenuId!==0){
    initUpdateMenuInfo(store.updateMenuId)
  }
})

/**
 * 获取
 * @param menuId
 * @returns {Promise<void>}
 */
const initUpdateMenuInfo=async (menuId) => {
  const res = await getMenuInfoById(menuId)
  addMenuData.value=res.data
}
const addMenuInfo = async () => {
 const valid= await addMenuFormRef.value.validate()
 if(valid) {
   try {
     const res = await addMenuInfos(addMenuData.value)
     if (res.code === 200) {
       ElMessage.success("添加成功")
       await closeDialog()
       emit('refresh')
     }

   }catch (e){}
 }
}
const updateMenuInfo =async () => {
  const valid= await addMenuFormRef.value.validate()
  if(valid) {
    ElMessageBox.confirm(
        '此操作将永久修改该菜单, 是否继续?',
        '提示', {
          app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(async () => {
      const res =await updateMenuInfos(addMenuData.value)
       ElMessage.success("修改成功")
       await closeDialog()
        emit('refresh')
    }).catch(() => {
    })
  }
}
const  closeDialog = () => {
  store.setMenuInsertOpen(false)
  addMenuFormRef.value.resetFields()
  addMenuData.value = {
    menuName:"",
    parentId:0,
    orderNum:"",
    path:"",
    component:"",
    menuType:'M',
    status:0,
    icon:""
  }

}
</script>

<style scoped>
.dialogClass .dlgTitleClass {
}

.el-dialog .el-dialog__header {
  margin: 0 !important;
  padding: 0 !important;
}

.el-dialog .dialogHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  margin: 0 10px;
  font-size: 18px;
  font-weight: bolder;
}

/* 确保对话框主体可以使用flex布局 */
:deep(.el-dialog__body) {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 0 50px!important;
}

.menu-form {
  margin:0  50px; /* 自动边距用于水平居中 */
}

.el-dialog .el-dialog__footer {
  padding: 10px;
}

/* 统一选择框、数字框和输入框的宽度 */
.el-input,
.el-input-number,
.el-select,
.el-tree-select{
  --el-select-input-focus-border-color: rgb(46, 92, 246);
  --el-color-primary: rgb(46, 92, 246);
  width: 100%; /* 或者设置一个具体的像素值，比如240px */
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}

.el-radio.is-bordered.is-checked {
  --el-color-primary: rgb(46, 92, 246);
}

.el-radio {
  --el-radio-input-border-color-hover: rgb(46, 92, 246);
}
</style>